<template>
	
	<div class="one_mech_box red_gb">
		<div class="top_con">
			<Row>
				<Col span="6">
					<div class="mach_left_state">
						<img class="mach_pic" src="/static/img/mach1.png"/>
						<div class="state_light_box">
							<ul>
								<li>
									<span class="red_state"></span>
									<p>运行</p>
								</li>
								<li>
									<span class=""></span>
									<p>异常</p>
								</li>
								<li>
									<span ></span>
									<p>通讯失效</p>
								</li>
							</ul>
						</div>
					</div>
				</Col>
				<Col span="18">
					<div class="stat_data_tb_box">
						<div class="data_titl">
							<Icon type="ios-search" size="26" style="float:right;margin-right:10px;"/>
						</div>
						
						<div class="iner_table_box">
							<table border="0" cellspacing="0" cellpadding="0">
								<tr>
									<td>压力</td>
									<td>0.34</td>
									<td>Mpa</td>
								</tr>
							</table>
						</div>
						
					</div>
				</Col>
			</Row>	
			
			
		</div>
		<div class="botm_box">
			<span>状态采集模块|</span>
			<span>空压机（离心机）回水电动采集模块</span>
			<Icon type="md-star" style="float: right;margin:5px 10px " size="20" color="#697fec"/>
		</div>		
	</div>
			
			
	
	
</template>

<script>
</script>

<style scoped="scoped">
	
	.state_light_box li .gren_light { background: #259b24;}
.state_light_box li   .red_state{ background: #e61b22;}
.one_mech_box{ border: 1px solid #ccc; border-radius: 4px; margin: 3px; height: 198px; }
.mach_left_state{height: 100%; text-align: center; float: left; width:130px ; border-right: 1px solid #ccc;overflow: hidden;}
.mach_left_state .mach_pic{ display: block; margin: 4px auto 4px;}
.state_light_box li span{ width:14px ; height: 14px; border-radius: 7px; margin-top: 3px;
 overflow: hidden; border: 1px soli #ccc; float: left; background: #bababa;
 }
.state_light_box li { padding-left: 30px; height: 20px;}
.state_light_box li p{ font-size: 14px; text-align: left; line-height: 22px; color: #333; padding-left: 20px; }	
.stat_data_tb_box{ float: left;width:100% ; padding-top: 4px;}
.stat_data_tb_box  .data_titl{ height: 30px; }
.stat_data_tb_box  .data_titl img{ float: right; cursor: pointer;}
.stat_data_tb_box table{ height: 100%;  text-align: center; width: 100%;}
.stat_data_tb_box table td{ height: 31px; color: #333;}

.one_mech_box{background: #fff; }
.one_mech_box .top_con{ height:166px ;overflow: hidden;border-bottom: 1px solid #ccc;}
.one_mech_box .botm_box{ padding-left: 2px; font-size: 15px ; color: #333;line-height: 30px;}
.one_mech_box .botm_box .blue_star{ cursor: pointer; float: right; margin: 4px 4px 0 2px ;}
.one_mech_box .iner_table_box{ height:124px ; }
/*.red_gb{ background: #f2dae2;}*/
	
ul li{ list-style: none;}	
</style>